<%--
  Created by IntelliJ IDEA.
  User: Oracle
  Date: 2022/4/21
  Time: 12:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" type="images/x-icon" href="/static/image/b.png"/>
    <title>我的钱包</title>
</head>

<link rel="stylesheet" href="/static/css/font/iconfont.css"/>
<link rel="stylesheet" href="/static/css/userpage.css">
<link rel="stylesheet" href="/static/css/floatbar.css">
<link rel="stylesheet" href="/static/css/font.css" />
<script src="/static/js/store.js"></script>

<style type="text/css">

    .right {
        width: 65vw;
        height: 100vh;
        float: right;
        margin-top: -75vh;
        margin-right: 8vw;
        box-sizing: border-box;
    }

    .right_top {
        width: 58vw;
        height: 12vh;
        float: left;
        background-image: url(/static/image/user-header-bg.png);
        background-size: 940px 162px;
    }

    .first_zhi {
        width: 3.5vw;
        float: left;
        margin-left: 4vw;
        margin-top: 2.5vh;
    }

    .first_text {
        width: 10vw;
        float: left;
        margin-top: 2.5vh;
        font-size: 14px;
        line-height: 3vh;
        color: #67696e;
        border-right: #b6b6b9 1px solid;
    }

    .first_text a {
        font-size: 13px;
    }

    .first_text a:hover:before {
        color: #000000;
    }

    .first_text span {
        color: #eea20e;
        font-size: 19px;
    }

    .second_zhi {
        width: 3.5vw;
        float: left;
        margin-top: 2.5vh;
        margin-left: 4vw;
    }

    .second_text {
        width: 10vw;
        float: left;
        margin-top: 3vh;
        font-size: 14px;
        line-height: 3vh;
        color: #67696e;
        border-right: #b6b6b9 1px solid;
        margin-left: 1vw;
    }

    .second_text a {
        font-size: 13px;
    }

    .second_text span {
        color: #eea20e;
        font-size: 19px;
    }

    .third_text {
        width: 6vw;
        float: left;
        margin-top: 2.5vh;
        margin-left: 4vw;
        color: #67696e;
    }

    .third_text span {
        color: #4886ff;
        font-size: 19px;
    }

    .right_down {
        width: 58vw;
        height: 8vh;
        margin-top: 15vh;
        background-color: #1c202b;
    }

    .right_down li:hover {
        background-color: #C1C1c1;
    }

    .right_down li {
        width: 10vw;
        height: 8vh;
        float: left;
        font-size: 17px;
        color: #9c9c9c;
        text-align: center;
        line-height: 8vh;
        border-right: #303745 1px solid;
    }

    .right_a {
        width: 56vw;
        height: 100vh;
        background-color: white;
        padding-left: 2vw;
        color: #9c9c9c;
        font-size: 14px;
    }

    input {
        width: 14vw;
        height: 5vh;
        border: orange 1px solid;
        margin-left: 4vw;
    }

    button {
        width: 5vw;
        height: 5vh;
        margin-left: 1vw;
        border-radius: 4px;
    }

    .btn {
        width: 8vw;
        margin-left: 4vw;
        color: #a0a0a0;
        background-color: #76ce60;
    }

    .but {
        margin-left: 7.7vw;
        width: 8vw;
        background-color: #c1c1c1;
        border-radius: 4px;
        color: #e8e8e8;
    }

    .right_a_text {
        width: 52vw;
        margin-top: 7vh;
        line-height: 4vh;
        border: #f4c468 1px solid;
        background-color: #fefcf7;
        font-size: 12px;
        padding-left: 1vw;
    }

    .right_a_record {
        margin-top: 8vh;
        font-size: 16px;
    }

    .right_a_record li {
        padding-top: 2vh;
        margin-top: 2vh;
        width: 11vw;
        height: 3.5vh;
        float: left;
        text-align: center;
        background-color: #f5f5f5;
        line-height: 1.5vh;
        border-radius: 1px;
        color: #b3b3b3;
        font-size: 14px;
    }
    .right {
        width: 65vw;
        height: 100vh;
        float: right;
        margin-top: -75vh;
        margin-right: 8vw;
    }

    .right_top {
        width: 58vw;
        height: 12vh;
        float: left;
        background-image: url(/static/image/user-header-bg.png);
        background-size: 940px 162px;
    }

    .first_zhi {
        width: 3.5vw;
        float: left;
        margin-left: 4vw;
        margin-top: 2.5vh;
    }

    .first_text {
        width: 10vw;
        float: left;
        margin-top: 2.5vh;
        font-size: 14px;
        line-height: 3vh;
        color: #67696e;
        border-right: #b6b6b9 1px solid;
    }

    .first_text a {
        font-size: 13px;
    }

    .first_text a:hover:before {
        color: #000000;
    }

    .first_text span {
        color: #eea20e;
        font-size: 19px;
    }

    .second_zhi {
        width: 3.5vw;
        float: left;
        margin-top: 2.5vh;
        margin-left: 4vw;
    }

    .second_text {
        width: 10vw;
        float: left;
        margin-top: 3vh;
        font-size: 14px;
        line-height: 3vh;
        color: #67696e;
        border-right: #b6b6b9 1px solid;
        margin-left: 1vw;
    }

    .second_text a {
        font-size: 13px;
    }

    .second_text span {
        color: #eea20e;
        font-size: 19px;
    }

    .third_text {
        width: 6vw;
        float: left;
        margin-top: 2.5vh;
        margin-left: 4vw;
        color: #67696e;
    }

    .third_text span {
        color: #4886ff;
        font-size: 19px;
    }

    .right_down {
        width: 58vw;
        height: 8vh;
        margin-top: 15vh;
        background-color: #1c202b;
    }

    .right_down li:hover {
        background-color: #C1C1c1;
    }

    .right_down li {
        width: 10vw;
        height: 8vh;
        float: left;
        font-size: 17px;
        color: #9c9c9c;
        text-align: center;
        line-height: 8vh;
        border-right: #303745 1px solid;
    }

    .right_a {
        width: 56vw;
        height: 100vh;
        background-color: white;
        padding-left: 2vw;
        padding-top: 4vh;
        color: #9c9c9c;
        font-size: 14px;
    }
    .right_a button{
        outline: none;
        border: none;
    }

    input {
        width: 14vw;
        height: 5vh;
        border: orange 1px solid;
        margin-left: 4vw;
    }

    button {
        width: 5vw;
        height: 5vh;
        margin-left: 1vw;
        border-radius: 4px;
    }

    .btn {
        width: 8vw;
        margin-left: 4vw;
        color: white;
    }

    .but {
        margin-left: 7.7vw;
        width: 8vw;
        background-color: #c1c1c1;
        border-radius: 4px;
        color: #e8e8e8;
    }

    .right_a_text {
        width: 52vw;
        margin-top: 7vh;
        line-height: 4vh;
        border: #f4c468 1px solid;
        background-color: #fefcf7;
        font-size: 12px;
        padding-left: 1vw;
    }

    .right_a_record {
        margin-top: 8vh;
        font-size: 16px;
    }

    .right_a_record li {
        padding-top: 2vh;
        margin-top: 2vh;
        width: 11vw;
        height: 3.5vh;
        float: left;
        text-align: center;
        background-color: #f5f5f5;
        line-height: 1.5vh;
        border-radius: 1px;
        color: #b3b3b3;
        font-size: 14px;
    }
    .left_middle a:first-child li{
        background: linear-gradient(to right, rgba(27, 32, 41, 1.0) 10%, rgba(62, 96, 153, 1.0) 50%, rgba(27, 32, 41, 1.0) 100%);
        color: white;
        font-weight: 600;
    }
    .icon-zhifubaozhifu {
        font-size: 50px;
        color: #a4a6a8;
    }

    .icon-V {
        font-size: 55px;
        color: #a4a6a8;
    }
    .right a{
        color: white;
    }
    .btns:hover{
        border: 1px solid #f4c468;
    }
    .active{
        border: 1px solid #f4c468;
        color: #f4c468;
        font-size: 16px;
    }
</style>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(document).ready(function(){
            $(".btns").click(function(){
                var val = $(this).val();
                $(".btns").removeClass("active");
                $(this).addClass("active");
                $(".right_a input").val(val);
                $(".but").css({"background-color":"#4874c8","color":"white"});
                $(".but a").attr("href","javascript:;");
            });
        });
        $(".right_a input").blur(function(){
            var inputval = $(".right_a input").val();
            //当文本框内容不等于空时可提交
            if(inputval != ""){
                $(".but").css({"background-color":"#4874c8","color":"white"});
                $(".but a").attr("href","javascript:;");
            }else{
                $(".but").css({"background-color":"#c1c1c1","color":"#e8e8e8"});
                $(".but a").attr("href","javascript:;");
            }
        });
    });
</script>

<body>

<div class="top">
    <iframe src="${pageContext.request.contextPath }/goods/head" scrolling="no" width="100%" height="71px" frameborder="0" name="user" id="userTop"></iframe>
</div>
<div class="down">
    <div class="left" style="margin-top:6px">
        <div class="left_top">
            <c:if test="${empty sessionScope.userNow.headPath}">
                <img src="/static/image/defaultHead.png" width="72px" height="72px">
            </c:if>
            <c:if test="${not empty sessionScope.userNow.headPath}">
                <img src="${sessionScope.userNow.headPath}" width="72px" height="72px">
            </c:if>
            <c:if test="${not empty sessionScope.userNow.username}">
                <h3>${sessionScope.userNow.username}</h3>
            </c:if>
            <c:if test="${empty sessionScope.userNow.username}">
                <h3>${sessionScope.userNow.tellphone}</h3>
            </c:if>
        </div>
        <div class="left_middle">
            <a href="${pageContext.request.contextPath }/user/center"><li><i class="iconfont icon-qianbao"></i>&nbsp;我的钱包</li></a>
            <a href="${pageContext.request.contextPath }/user/setting"><li><i class="iconfont icon-shezhi"></i>&nbsp;账号设置</li></a>
            <a href="${pageContext.request.contextPath }/user/info"><li><i class="iconfont icon-xiaoxi"></i>&nbsp;消息中心</li></a>
            <a href="${pageContext.request.contextPath }/user/collect"><li><i class="iconfont icon-shoucang"></i>&nbsp;我的收藏</li></a>
            <a href="${pageContext.request.contextPath }/user/coupon"><li><i class="iconfont icon-Coupons"></i>&nbsp;权益卡券</li></a>
            <a href="${pageContext.request.contextPath }/user/feedback"><li><i class="iconfont icon-kefu"></i>&nbsp;联系客服</li></a>
        </div>
    </div>
    <div class="right">
        <div class="right_top">
            <div class="first">
                <div class="first_zhi">
                    <i class="iconfont icon-zhifubaozhifu"></i>
                </div>
                <div class="first_text">Buff余额<a href="javascript:;" style="color: #4773c8" title="Buff余额-支付宝
                1. 支付宝余额可用于购买饰品，或提现到支付宝2. 通过花呗信用卡充值到BUFF的余额不可提现">
                    支付宝</a><br><span>￥${sessionScope.userNow.balance}</span></div>
            </div>
            <div class="second">
                <div class="second_zhi">
                    <i class="iconfont icon-V"></i>
                </div>
                <div class="second_text">Buff余额<a href="javaScript:;" style="color: #4773c8" title="Buff余额-银行卡
                1. 其他用户使用BUFF余额-银行卡和微信支付购买你饰品的收入2. 可购买饰品，或提现到银行卡">其他</a>
                    <br><span>￥0</span></div>
            </div>
            <div class="third">
                <div class="third_text">
                    锁定余额&nbsp;<a href="javascript:;" title="锁定余额 发布求购、发起还价会冻结相应金额，包含支付宝和银行卡余额。">
                    <i class="iconfont icon-wenhao1"></i></a>
                    <span>￥0</span>
                </div>
            </div>
        </div>
        <div class="right_down">
            <li><a href="总页面.html">充值</a></li>
            <li><a href="资金流水.html">资金流水</a></li>
        </div>
        <div class="right_a">
            充值金额<input type="text" class="btns" value="" style="padding-left: 20px" placeholder="请输入充值金额"/>
            <button class="btns" value="100">￥100</button>
            <button class="btns" value="500">￥500</button>
            <button class="btns" value="1000">￥1000</button>
            <br><br><br>
            充值方式
            <button class="btn">微信支付</button>
            <br><br><br>
            <button class="but"><a href="javascript:;">确认充值</a></button>
            <div class="right_a_text">
                充值须知<br>1.单笔限额5-20000元；<br>
                2.充值退款或提现会产生1%服务费；<br>
                3.账号违规资金转移套现将被冻结处理。
            </div>
            <div class="right_a_record">
                充值记录
                <ul>
                    <li>流水号</li>
                    <li>充值金额（元）</li>
                    <li>付款账户</li>
                    <li>进度</li>
                    <li>创建时间</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tail">
        <iframe src="${pageContext.request.contextPath }/goods/tail" scrolling="no" width="100%" height="324px" frameborder="0" ></iframe>
    </div>

    <div class="floatbar">
        <a href="">
            <div class="Icontext"><span class="iconfont icon-shouji"></span><br />
                <font size="1">App</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-xingxing"></span><br />
                <font size="1" color="#95959">收藏</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-weixin"></span><br />
                <font size="1" color="#95959">公众号</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-weibo"></span><br />
                <font size="1" color="#95959">微博</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-wenhao"></span><br />
                <font size="1" color="#95959">帮助</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-duanxin"></span><br />
                <font size="1" color="#95959">客服</font>
            </div>
        </a>
        <a href="javascript:scroll(0,0);">
            <div class="backTop"><span class="iconfont icon-sanjiaoxing_shang"></span><br />
                <font size="2" color="#95959">TOP</font>
            </div>
        </a>
    </div>

    <%-- 用户信息悬浮框 --%>
    <div class="store" id="store">
        <div class="store-info">
            <div class="store-user">
                <div class="store-user-img">
                    <c:if test="${empty sessionScope.userNow.headPath}">
                        <img src="../static/image/defaultHead.png" width="52px" height="52px"/>
                    </c:if>
                    <c:if test="${not empty sessionScope.userNow.headPath}">
                        <img src="${sessionScope.userNow.headPath}" width="52px" height="52px"/>
                    </c:if>
                </div>
                <div class="store-user-name">
                    <c:if test="${not empty sessionScope.userNow.username}">
                        <h4>${sessionScope.userNow.username}</h4>
                    </c:if>
                    <c:if test="${empty sessionScope.userNow.username}">
                        <h4>${sessionScope.userNow.tellphone}</h4>
                    </c:if>
                    <p><a href="/user/logout">注销</a></p>
                </div>
            </div>
            <div class="store-account">
                <div class="balance">余额
                    <span>￥${sessionScope.userNow.balance}</span>
                </div>
                <div class="topUp">
                    <a href="/user/topUp">充值</a>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>
